@import "./variables";

// get fonts from CDN
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

// general styles
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Raleway', sans-serif;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

html,
body {
    width: 100%;
    margin: 0;
    height: 100%;
    background-color: $light-gray-bg;
}

// helper classes
.full-height {
    height: 100%;
}

.full-width {
    max-width: 100%;
}

.cursor-pointer {
    cursor: pointer;
}

.highlighted {
    color: $warn;
}

.text-color-light {
    * {
        color: $light-font-color !important;

    }
}
// custom card style
$card-bg: $white-bg;
.card {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: $card-bg;
}

// custom table design
$table-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
.table__box-shadow {
    box-shadow: $table-box-shadow;
    -moz-box-shadow: $table-box-shadow;
    -o-box-shadow: $table-box-shadow;
    -webkit-box-shadow: $table-box-shadow;
}

.table__cell--highlighted {
    &:hover {
        cursor: pointer;
        background-color: $light-gray-bg;
    }
}

// override max width of dialog
md-dialog-container.mat-dialog-container {
    max-width: 100vw;
    padding: 0;
}

md-dialog-content.mat-dialog-content {
    max-height: inherit;
}

// removes focus border around elements
:focus {
    outline: -webkit-focus-ring-color auto 0;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: lighter;
    font-style: normal;
    font-size: 20px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';

}

.settings {
    width: 100%;
    max-width: 450px;
}

.button-in-row {
    display: inline-flex !important;
    flex-direction: row;
}

.mat-list-base .mat-list-item .mat-list-icon, .mat-list-base .mat-list-option .mat-list-icon {
    transform: scale(2);
    padding-right: 10px !important;
}


.right-alignment {
    margin-right: 0px;
    margin-left: auto;
}

.width-25 {
    width: 15% !important;
}

// browser-specific stuff
// fix safari flex issue (https://github.com/angular/flex-layout/issues/201)
div[fxLayout="column"] > div[fxFlex] {
    flex: 1 0 auto !important;
}

.mat-card {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 16px;
    background-color:$white-bg;
}
  